<div class="box">
    <div class="box-header">

        <h3 class="box-title"></h3>

        <span style="position: absolute;left: 10px;top: 5px;">
            {!! $grid->renderHeaderTools() !!}
        </span>

        <div class="box-tools">
            {!! $grid->renderFilter() !!}
            {!! $grid->renderExportButton() !!}
            {!! $grid->renderCreateButton() !!}
        </div>

    </div>
    <!-- /.box-header -->

    <div class="box-footer">
        <ul class="mailbox-attachments clearfix">
            @foreach($grid->rows() as $row)
                <li class="box img-box-{{$row->id}}">
                    <span class="mailbox-attachment-icon has-img"><img
                                src="{{config('admin.upload.host').$row->img_name}}" alt="Attachment"></span>

                    <div class="mailbox-attachment-info">
                        <span class="mailbox-attachment-name"><i class="fa fa-user"></i> {{$row->user['name']}}</span>
                        <span class="mailbox-attachment-size">
                            {{$row->created_at}}
                            <a onclick="del_card_img(this)" data-id="{{$row->id}}" href="javascript:void(0)"
                               class="btn btn-default btn-xs pull-right"><i class="fa fa-trash-o text-red"></i></a>
                        </span>
                    </div>
                    <div class="overlay load-box-{{$row->id}}" style="display: none;">
                        <i class="fa fa-refresh fa-spin"></i>
                    </div>
                </li>
            @endforeach
        </ul>
    </div>

    <div class="box-footer clearfix">
        {!! $grid->paginator() !!}
    </div>
    <!-- /.box-body -->
</div>
<script>
    function del_card_img(dom) {
        var id = $(dom).data('id');
        var token = "{{csrf_token()}}";

        $(".load-box-" + id).show();

        $.post("{{route('editor-del-image')}}", {id: id, _token: token}, function (re) {
            if (re.status_code == 200) {
                $(".img-box-" + id).fadeOut();
                toastr["success"](re.message)
            } else {
                $(".load-box-" + id).hide();
                toastr["error"](re.message)
            }
        });


    }
</script>